/**
 * @author weileiming
 * @description 功能项组件
 */

import React from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";

interface FeaturePanelProps {
  visible: boolean;
}

// 直接使用自定义接口定义参数类型
const FeaturePanel = ({ visible }: FeaturePanelProps) => {
  const features = [
    { id: "photo", name: "相册", icon: "📷" },
    { id: "camera", name: "拍摄", icon: "🎥" },
    { id: "video", name: "视频", icon: "📹" },
    { id: "location", name: "位置", icon: "📍" },
  ];

  return (
    <View className={`feature-panel ${visible ? "visible" : ""}`}>
      <View className="feature-grid">
        {features.map((feature) => (
          <View key={feature.id} className="feature-item">
            <View className="feature-icon">{feature.icon}</View>
            <Text className="feature-name">{feature.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

export default FeaturePanel;
